<template>
    <div>

        <up-popup :show="show" @open="open" mode="right" closeOnClickOverlay="true" @close="show = false">

            <div class="popup_box">
                <h5 class="tit">筛选</h5>

                <up-cell-group :border="false">



                    <up-cell title="产品名称" :value="ProductValue ? ProductValue : '请选择'" :isLink="true"
                        @tap="showProduct = true"></up-cell>

                    <up-cell title="成交员工" :value="UserValue ? UserValue : '请选择'" :isLink="true"
                        @tap="showUser = true"></up-cell>

                    <up-cell title="是否退费" :value="RetundValue ? RetundValue : '请选择'" :isLink="true"
                        @tap="showRetund = true"> </up-cell>


                </up-cell-group>
                <div style="color: rgb(16,16,16);
 font-size: 30rpx;
text-align: left;
font-family: PingFangSC-regular;margin-left:26rpx;margin-top: 20rpx;"> 成交时间 </div>
                <div style="display: flex;align-items: center;justify-content: space-around;margin-top:20rpx;">
                    <div style="width: 252rpx;
               height: 64rpx;
                 line-height: 64rpx;
                   background-color: rgba(246,247,249,1);
                     color: rgba(79,79,79,1);
                       font-size: 24rpx;
                    text-align: center;
                    font-family: -regular;" @tap="showTime = true"> {{ startTime ? startTime : '开始时间' }} </div>


                    <div style="width: 28rpx;
                     height: 2rpx;
                     background-color: rgba(187,187,187,1);
                    border: 2rpx solid rgba(187,187,187,1);"></div>

                    <div style="width: 252rpx;
               height: 64rpx;
                 line-height: 64rpx;
                   background-color: rgba(246,247,249,1);
                     color: rgba(79,79,79,1);
                       font-size: 24rpx;
                    text-align: center;
                    font-family: -regular;" @tap="showEndTime = true"> {{ endTime ? endTime : '结束时间' }} </div>

                </div>


                <up-picker :show="showEvent" :columns="columns1" @close="showEvent = false" closeOnClickOverlay="true"
                    @confirm="EventConfirm" @cancel="showEvent = false"></up-picker>
                <up-picker :show="showProduct" :columns="columns2" @close="showProduct = false"
                    closeOnClickOverlay="true" @confirm="ProductConfirm" @cancel="showProduct = false"
                    keyName="productName"></up-picker>
                <up-picker :show="showUser" :columns="column3" @close="showUser = false" closeOnClickOverlay="true"
                    @confirm="UserConfirm" @cancel="showUser = false" keyName="name"></up-picker>
                <up-picker :show="showRetund" :columns="column4" @close="showUser = false" closeOnClickOverlay="true"
                    @confirm="RetundConfirm" @cancel="showRetund = false"></up-picker>

            </div>
            <up-calendar :show="showTime" monthNum="12" minDate="2025-01-01" closeOnClickOverlay="true"
                @close="showTime = false" @confirm="startTimeConfirm"></up-calendar>
            <up-calendar :show="showEndTime" monthNum="12" minDate="2025-01-01" closeOnClickOverlay="true"
                @close="showEndTime = false" @confirm="EndTimeConfirm"></up-calendar>


            <div class="bottom_btn_box">
                <up-button text="重置" style="width:50%;" @tap="clearData"></up-button>
                <up-button text="确定" style="width:50%;background: linear-gradient(88.71deg, rgba(147,210,243,1) 15.3%,rgba(64,149,229,1) 74.51%);
color: rgba(255,255,255,1);" @tap="confirmData"></up-button>

            </div>

        </up-popup>
    </div>
</template>


<script setup>
import { ref } from 'vue';
import emitter from '../../../utils/eventBus';
import { getBusProductList, getBusinessUserList } from '../../../utils/performance';
const show = ref(false)
const school = ref('')
const showEvent = ref(false)
const EventValue = ref('')
const columns1 = ref([['2025', '2024', '2023', '2022']])
const columns2 = ref([[]])
const showProduct = ref(false)
const ProductValue = ref('')
const showUser = ref(false)
const showRetund = ref(false)
const UserValue = ref('')
const column3 = ref([[]])
const column4 = ref([['是', '否']])
const RetundValue = ref('')
const showTime = ref(false);
const startTime = ref('')
const endTime = ref('')
const busProId = ref()
const valueTime = ref(Date.now());
const showEndTime = ref(false)
const getProductList = async () => {
    try {
        const res = await getBusProductList({
            businessId: uni.getStorageSync('businessId')
        })
        console.log(res)
        columns2.value[0] = res.data
        console.log(columns2.value)

    } catch (E) {
        console.log(E)
    }
}
const open = () => {

    // clearData()
}

    emitter.on('cleardata', () => {
        clearData()
    })
emitter.on('openpopup', () => {
    show.value = true;
});

// 监听关闭弹窗事件
emitter.on('closePopup', () => {
    show.value = false;
});
const EventConfirm = (e) => {
    EventValue.value = e.value[0]
    showEvent.value = false
}
const ProductId = ref('')
const ProductConfirm = (e) => {
    console.log(e)
    ProductValue.value = e.value[0].productName
    ProductId.value = e.value[0].productId
    showProduct.value = false
    busProId.value = e.value[0].busProId

}
const getBusinessUserListHandle = async () => {
    try {
        const res = await getBusinessUserList({
            businessId: uni.getStorageSync('businessId')
        })
        console.log(res, 123)
        column3.value[0] = res.data
        console.log(column3.value)
    } catch (E) {
        console.log(E)
    }
}
const UserId = ref('')
const UserConfirm = (e) => {
    console.log(e)
    UserValue.value = e.value[0].name
    showUser.value = false
    UserId.value = e.value[0].userId
}
const RetundConfirm = (e) => {

    RetundValue.value = e.value[0]
    showRetund.value = false
}
const startTimeConfirm = (v) => {
    startTime.value = v[0]
    showTime.value = false
}
const EndTimeConfirm = (v) => {
    endTime.value = v[0]
    showEndTime.value = false

}
const clearData = () => {
     ScreenData.value={}
    console.log('触发删除')
    school.value = ''
    EventValue.value = ''
    ProductValue.value = ''
    UserValue.value = ''
    RetundValue.value = ''
    startTime.value = ''
    endTime.value = ''
    UserId.value = ''
    busProId.value = ''
    ProductId.value = ''
    UserId.value = ''
 console.log( ScreenData.value,' ScreenData.value')
}
const ScreenData = ref({})
const confirmData = () => {
    
     ScreenData.value={}
    ScreenData.value = {
        school: school.value,
        year: EventValue.value,
        ProductId: busProId.value,
        isReturn: RetundValue.value,
        startTime: startTime.value,
        endTime: endTime.value,
        userId: UserId.value,
        busProId: busProId.value
    }
    show.value = false
    emitter.emit('UpdateData', ScreenData.value)

}
getProductList()
getBusinessUserListHandle()
</script>


<style lang="scss">
.popup_box {
    width: 650rpx;
    padding-left: 20rpx;
	margin-top: 44px;

    .tit {
        width: 100%;
        height: 46rpx;
        margin-top: 40rpx;
        line-height: 46rpx;
        color: rgb(16, 16, 16);
        font-size: 30rpx;
        text-align: center;
        font-family: PingFangSC-regular;
    }

    .school {
        margin-left: 30rpx;
        display: flex;
        flex-direction: column;
        // align-items: center;
        margin-top: 20rpx;
        padding-right: 20px;
    }

    .u-cell__title-text {
        color: rgb(16, 16, 16);

    }

}

.bottom_btn_box {
    width: 100%;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 0;
}
</style>